{% extends "base.jinja" %}

{% block title %}{{user}}的个人空间{% endblock %}
{% block keywords %}{{user}},{{site_options.keyword}}{% endblock %}
{% block description %}{{user}}的个人空间{% endblock %}

{% block css %},user.css{% endblock %}

{% block pagetype %}user-setting{% endblock %}

{% block main %}
    {%- include 'user/head.jinja' -%}
    
    <div class="layout p-usetting" id="u-setting">
        <div class="us-success">修改已保存</div>
        <div class="us-side">
            <ul>
                {% if user_home.group_id ==3 %}
                <li><a href="/u/setting/biz/">商家设置</a></li>
                {% endif %}
                <li class="active"><a href="/u/setting/info/">个人设置</a></li>
            </ul>
        </div>
        <div class="us-main">
            <div class="usm-tab" id="usm-tab">
                <ul>
                    {% if not user_home.group_id ==3 %}
                    <li><a href="#base">基本资料</a></li>
                    <li><a href="#wed">婚礼信息</a></li>
                    {% endif %}
                    <li><a href="#avatar">头像设置</a></li>
                    <li><a href="#email">登录邮箱</a></li>
                    <li><a href="#pwd">密码设置</a></li>
                    <li><a href="#sync">同步设置</a></li>
                </ul>
            </div>
    
            <div class="usm-box" id="usm-box">
                {% if not user_home.group_id ==3 %}
                <div class="usm-item us-base">
                    <form>
                        <table>
                            <tbody>
                                <tr>
                                    <th><span>昵称：</span></th>
                                    <td>{{user}}</td>
                                </tr>
                                <tr>
                                    <th><span>电话：</span></th>
                                    <td>
                                        <input size="35" data-error="电话格式不正确" data-rule="^[\d\-]{8,13}$" class="inp-text" type="text" name="phone" value="{{user.phone|default('')}}" />
                                        <div class="ui-a us-tips"></div>
                                    </td>
                                </tr>
                                <tr>
                                    <th><span>QQ：</span></th>
                                    <td>
                                        <input size="35" data-error="请输入正确的QQ号码" data-rule="^\d{5,11}$" class="inp-text" type="text" name="qq" value="{{user.qq|default('')}}" />
                                        <div class="ui-a us-tips"></div>
                                    </td>
                                </tr>
                                <tr>
                                    <th><span>性别：</span></th>
                                    <td>
                                        <select name="gender">
                                            <option value="m" {%if user.gender == 'm'%}selected{%endif%}>男</option>
                                            <option value="f" {%if user.gender == 'f'%}selected{%endif%}>女</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <th><span>省份：</span></th>
                                    <td>
                                        <select name="province" id="province">
                                            {% for p in country %}
                                                {% if not p.id == 100 %}
                                                <option value="{{p.id}}" {%if user.province_id == p.id%}selected{%endif%}>{{p.name}}</option>
                                                {% endif %}
                                            {% endfor%}
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <th><span>城市：</span></th>
                                    <td>
                                        <select name="city" id="city" data-city="{{user.city_id}}">
                                        </select>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <th></th>
                                <td><a href="javascript:;" class="inp-btn-pk user-base-data">保存</a></td>
                            </tfoot>
                        </table>  
                    </form>
                </div>

                <div class="usm-item us-wed" id="us-wed">
                    <form>
                        <table>
                            <tbody>
                                <tr>
                                    <th><span>我：</span></th>
                                    <td>
                                        {% if wedding_data.user_role == 2 %}
                                            <input size="30" placeholder="我的姓名" data-error="请输入您的姓名" data-rule="^[\S]+$" class="inp-text" type="text" name="wed-self-name" value="{{wedding_data.bride|default('我的姓名')}}" />
                                        {% else %}
                                            <input size="30" placeholder="我的姓名" data-error="请输入您的姓名" data-rule="^[\S]+$" class="inp-text" type="text" name="wed-self-name" value="{{wedding_data.bridegroom|default('我的姓名')}}" />
                                        {% endif %}
                                        <select id="wed-self" name="wed-self-role">
                                            <option value="2">新娘</option>
                                            <option value="1">新郎</option>
                                        </select>
                                        <div class="ui-a us-tips"></div>
                                    </td>
                                </tr>
                                <tr>
                                    <th><span>另一半：</span></th>
                                    <td>
                                        {% if wedding_data.user_role == 1 %}
                                            <input size="30" placeholder="另一半姓名" data-error="请输入另一半的姓名" data-rule="^[\S]+$" class="inp-text" type="text" name="wed-other-name" value="{{wedding_data.bride|default('另一半姓名')}}" />
                                        {% else %}
                                            <input size="30" placeholder="另一半姓名" data-error="请输入另一半的姓名" data-rule="^[\S]+$" class="inp-text" type="text" name="wed-other-name" value="{{wedding_data.bridegroom|default('另一半姓名')}}" />
                                        {% endif %}
                                        <select id="wed-other" name="wed-other-role">
                                            <option value="1">新郎</option>
                                            <option value="2">新娘</option>
                                        </select>
                                        <div class="ui-a us-tips"></div>
                                    </td>
                                </tr>
                                <tr>
                                    <th><span>婚礼日期：</span></th>
                                    <td clss="us-wed-date">
                                       <input size="30" id="wed-datepicker" data-time="{{wedding_data.wedding_time}}" data-error="请选择婚礼日期" data-rule="^[\S]+$" class="inp-text" type="text" name="wed-date" value="{{wedding_data.wedding_date|default('')}}" />
                                        <select name="wed-hours">
                                            <option value="01">01</option>
                                            <option value="02">02</option>
                                            <option value="03">03</option>
                                            <option value="04">04</option>
                                            <option value="05">05</option>
                                            <option value="06">06</option>
                                            <option value="07">07</option>
                                            <option value="08">08</option>
                                            <option value="09">09</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option>
                                            <option value="12">12</option>
                                            <option value="13">13</option>
                                            <option value="14">14</option>
                                            <option value="15">15</option>
                                            <option value="16">16</option>
                                            <option value="17">17</option>
                                            <option value="18">18</option>
                                            <option value="19">19</option>
                                            <option value="20">20</option>
                                            <option value="21">21</option>
                                            <option value="22">22</option>
                                            <option value="23">23</option>
                                            <option value="24">24</option>
                                        </select>
                                        <span>时</span>
                                        <select name="wed-minutes">
                                            <option value="00">00</option>
                                            <option value="01">01</option>
                                            <option value="02">02</option>
                                            <option value="03">03</option>
                                            <option value="04">04</option>
                                            <option value="05">05</option>
                                            <option value="06">06</option>
                                            <option value="07">07</option>
                                            <option value="08">08</option>
                                            <option value="09">09</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option>
                                            <option value="12">12</option>
                                            <option value="13">13</option>
                                            <option value="14">14</option>
                                            <option value="15">15</option>
                                            <option value="16">16</option>
                                            <option value="17">17</option>
                                            <option value="18">18</option>
                                            <option value="19">19</option>
                                            <option value="20">20</option>
                                            <option value="21">21</option>
                                            <option value="22">22</option>
                                            <option value="23">23</option>
                                            <option value="24">24</option>
                                            <option value="25">25</option>
                                            <option value="26">26</option>
                                            <option value="27">27</option>
                                            <option value="28">28</option>
                                            <option value="29">29</option>
                                            <option value="30">30</option>
                                            <option value="31">31</option>
                                            <option value="32">32</option>
                                            <option value="33">33</option>
                                            <option value="34">34</option>
                                            <option value="35">35</option>
                                            <option value="36">36</option>
                                            <option value="37">37</option>
                                            <option value="38">38</option>
                                            <option value="39">39</option>
                                            <option value="40">40</option>
                                            <option value="41">41</option>
                                            <option value="42">42</option>
                                            <option value="43">43</option>
                                            <option value="44">44</option>
                                            <option value="45">45</option>
                                            <option value="46">46</option>
                                            <option value="47">47</option>
                                            <option value="48">48</option>
                                            <option value="49">49</option>
                                            <option value="50">50</option>
                                            <option value="51">51</option>
                                            <option value="52">52</option>
                                            <option value="53">53</option>
                                            <option value="54">54</option>
                                            <option value="55">55</option>
                                            <option value="56">56</option>
                                            <option value="57">57</option>
                                            <option value="58">58</option>
                                            <option value="59">59</option>
                                        </select>
                                        <span>分</span>
                                        <div class="ui-a us-tips"></div> 
                                    </td>
                                </tr>
                                <tr>
                                    <th><span>所在城市：</span></th>
                                    <td>
                                        <input size="30" id="wed-city" data-error="请输入您所在的城市" data-rule="^[\S]+$" class="inp-text" type="text" name="wed-city" value="{{wedding_data.city|default('')}}" />
                                        <div class="ui-a us-tips"></div>
                                    </td>
                                </tr>
                                <tr>
                                    <th><span>详细地址：</span></th>
                                    <td>
                                        <input size="30" data-error="请输入详细地址" data-rule="^[\S]+$" class="inp-text" type="text" name="wed-address" value="{{wedding_data.address|default('')}}" />
                                        <div class="ui-a us-tips"></div>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <th></th>
                                <td><a href="javascript:;" class="inp-btn-pk user-wed-data">保存</a></td>
                            </tfoot>
                        </table> 
                    </form>
                </div>
                {% endif %}

                <div class="usm-item us-avatar" id="us-avatar">
                    <div class="us-avabox">
                        <img class="avatar" src="{{user.avatar}}!100" width="80" />
                    </div>
                    <ul>
                        <li id="us-up-box" class="">
                            <a href="javascript:;" id="us-upload">从电脑上传</a>
                        </li>
                        <li><a href="javascript:;" class="auth-qq" data-action="{{qq_auth_uri|replace('auth/qq/', 'auth/qq/?auth_type%3Dsync')}}">从QQ同步</a></li>
                        <li><a href="javascript:;" class="auth-wb" data-action="{{weibo_auth_uri|replace('auth/sina/', 'auth/sina/?auth_type=sync')}}">从新浪微博同步</a></li>
                    </ul>
                </div>

                <div class="usm-item us-email">
                    <form>
                        <table>
                            <tbody>
                                <tr>
                                    <th><span>当前邮箱：</span></th>
                                    <td>{{user.email|default('-')}}</td>
                                </tr>
                                <tr>
                                    <th><span>新邮箱：</span></th>
                                    <td>
                                        <input size="35" data-error="邮箱格式不正确" data-rule="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$" class="inp-text" type="text" name="email" value="" />
                                        <div class="ui-a us-tips"></div>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <th></th>
                                <td><a href="javascript:;" class="inp-btn-pk user-base-data">保存</a></td>
                            </tfoot>
                        </table>
                    </form>
                </div>

                <div class="usm-item us-pwd">
                    <form>
                        <table>
                            <tbody>
                                <tr>
                                    <th><span>密码：</span></th>
                                    <td>
                                        <input size="35" data-error="请输入6位以上字母、数字组合" data-rule="^[^\s]{6,}$" class="inp-text" type="password" name="new_pwd" value="" />
                                        <div class="ui-a us-tips"></div>
                                    </td>
                                </tr>
                                <tr>
                                    <th><span>重复密码：</span></th>
                                    <td>
                                        <input size="35" data-error="请重复输入密码" data-rule="^[^\s]+$" class="inp-text" type="password" name="rep_pwd" value="" />
                                        <div class="ui-a us-tips"></div>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <th></th>
                                <td><a href="javascript:;" class="inp-btn-pk user-base-data">保存</a></td>
                            </tfoot>
                        </table>
                    </form>
                </div>

                <div class="usm-item us-sync" id="us-sync">
                    <ul>
                        {% if auth_data.sina %}
                            {% set au_wb = auth_data.sina %}
                            <li>
                                <a class="ui-a auth-wb" href="javascript:;" data-action="{{weibo_auth_uri|replace('auth/sina/', 'auth/sina/?auth_type=sync')}}"></a>
                                {% if not au_wb.is_expires %}
                                <div class="us-sync-btn"><a href="javascript:;" class="us-sync-cancel" data-type="1">取消</a></div>
                                <div class="us-sync-name">{{au_wb.username|default('')}}</div>
                                <div class="us-sync-box">
                                    <form>
                                        <div class="sync-tips">同步状态更新成功</div>
                                        <input type="hidden" name="type" value="1" />
                                        <label class="inp-checkbox">
                                            <input type="checkbox" {%if au_wb.sync.album%}checked="checked"{%endif%} name="album" value="1" />同步灵感板
                                        </label>
                                        <label class="inp-checkbox">
                                            <input type="checkbox" {%if au_wb.sync.post%}checked="checked"{%endif%} name="post" value="1" />同步发布
                                        </label>
                                        <label class="inp-checkbox">
                                            <input type="checkbox" {%if au_wb.sync.comment%}checked="checked"{%endif%} name="comment" value="1" />同步评论
                                        </label>
                                        <label class="inp-checkbox">
                                            <input type="checkbox" {%if au_wb.sync.like%}checked="checked"{%endif%} name="like" value="1" />同步喜欢
                                        </label>
                                    </form>
                                </div>
                                {% else %}
                                    <div class="us-sync-btn"><a href="javascript:;" class="us-sync-act">同步</a></div>
                                    <div class="us-sync-name">认证过期</div>
                                {% endif %}
                            </li>
                        {% else %}
                            <li class="us-sync-disable">
                                <a class="ui-a auth-wb" href="javascript:;" data-action="{{weibo_auth_uri|replace('auth/sina/', 'auth/sina/?auth_type=sync')}}"></a>
                                <div class="us-sync-btn"><a href="javascript:;" class="us-sync-act">同步</a></div>
                            </li>
                        {% endif %}

                        {% if auth_data.qq %}
                            {% set au_qq = auth_data.qq %}
                            <li>
                                <a class="ui-a auth-qq" href="javascript:;" data-action="{{qq_auth_uri|replace('auth/qq/', 'auth/qq/?auth_type%3Dsync')}}"></a>
                                {% if not au_qq.is_expires %}
                                    <div class="us-sync-btn"><a href="javascript:;" class="us-sync-cancel" data-type="2">取消</a></div>
                                    <div class="us-sync-name">{{au_qq.username|default('')}}</div>
                                    <div class="us-sync-box">
                                        <form>
                                            <div class="sync-tips">同步状态更新成功</div>
                                            <input type="hidden" name="type" value="2" />
                                            <label class="inp-checkbox">
                                                <input type="checkbox" {%if au_qq.sync.album%}checked="checked"{%endif%} name="album" value="1" />同步灵感板
                                            </label>
                                            <label class="inp-checkbox">
                                                <input type="checkbox" {%if au_qq.sync.post%}checked="checked"{%endif%} name="post" value="1" />同步发布
                                            </label>
                                            <label class="inp-checkbox">
                                                <input type="checkbox" {%if au_qq.sync.comment%}checked="checked"{%endif%} name="comment" value="1" />同步评论
                                            </label>
                                            <label class="inp-checkbox">
                                                <input type="checkbox" {%if au_qq.sync.like%}checked="checked"{%endif%} name="like" value="1" />同步喜欢
                                            </label>
                                        </form>
                                    </div>
                                {% else %}
                                    <div class="us-sync-btn"><a href="javascript:;" class="us-sync-act">同步</a></div>
                                    <div class="us-sync-name">认证过期</div>
                                {% endif %}
                            </li>
                        {% else %}
                            <li class="us-sync-disable">
                                <a class="ui-a auth-qq" href="javascript:;" data-action="{{qq_auth_uri|replace('auth/qq/', 'auth/qq/?auth_type%3Dsync')}}"></a>
                                <div class="us-sync-btn"><a href="javascript:;" class="us-sync-act">同步</a></div>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
<script>
var citys = {
    {% for p in country %}{% if not p.id == 100 %}
    '{{p.id}}': [
        {% for c in p.citys %}{id: {{c.id}},name: '{{c.name}}'}{% if not loop.last %},{% endif %}{% endfor %}
    ]{% if not loop.last %},{% endif %}{% endif %}{% endfor %}
};
seajs.use('page/user/setting', function(p){p.render(citys);});
</script>
{% endblock %}